<!-- 基础列表页 -->
<template>
  <!-- 详情页 -->
  <router-view v-if="url === '/list/base/detail'"></router-view>
  <div v-else class="base-wapper bg-wt" style="padding-top: 0px">
    <!-- 筛选区域 -->
    <searchFormBox
      :pagination="pagination"
      @handleSearch="handleSearch"
      @handleReset="handleReset"
    ></searchFormBox>
    <!-- end -->
    <!-- 表格 -->
    <tableList
      :list-data="listData"
      :pagination="pagination"
      @handleSetupContract="handleSetupContract"
      @handleBulid="handleBulid"
      @handleClickStatus="handleClickStatus"
      @handleClickDelete="handleClickDelete"
      @fetchData="fetchData"
    ></tableList>
    <!-- end -->
    <!-- 新增，编辑弹窗 -->
    <dialog-form
      :visible="visible"
      :title="title"
      :data="DialogFormdata"
      :form-data="formData"
      @handleClose="handleClose"
      @fetchData="fetchData"
    />
    <!-- end -->
    <!-- 生产环境禁用操作弹窗 -->
    <ProdDisabled
      :confirm-visible="prodDisabledVisible"
      @handleClose="handleClose"
    ></ProdDisabled>
    <!-- end -->
    <!-- 删除弹层 -->
    <Delete
      :dialog-delete-visible="dialogDeleteVisible"
      :delete-text="deleteText"
      @handle-delete="handleDelete"
      @handle-close="handleClose"
    ></Delete>
    <!-- end -->
    <!-- 启用或停用 -->
    <Delete
      :header-title="statusHeader"
      :dialog-delete-visible="dialogStatusVisible"
      :delete-text="statusText"
      @handle-delete="handleStatus"
      @handle-close="handleClose"
    ></Delete>
    <!-- end -->
  </div>
</template>

<script lang="ts">
export default {
  name: 'ListBase',
  components: { tableList, searchFormBox }
}
</script>

<script setup lang="ts">
import { useRoute } from 'vue-router'
import { ref, onMounted, watch } from 'vue'
import { MessagePlugin } from 'tdesign-vue-next'
import { delApplication, getApplicationList, saveApplication } from "@/api/application";
import DialogForm from './components/DialogForm.vue' // 新增,编辑弹窗.
import ProdDisabled from '@/components/Message/ProdDisabled.vue' // 删除弹窗
import Delete from '@/components/Delete/index.vue' // 删除弹层
import tableList from './components/TableList.vue' // 表格
import searchFormBox from './components/SearchForm.vue' // 搜索框表单

const visible = ref(false) // 新增，编辑弹窗
const listData = ref([]) // 列表数据
const dataLoading = ref(false)
const DialogFormdata = ref({}) // 弹窗表单内容
const title = ref('新建') // 弹窗标题
const dialogStatusVisible = ref(false) // 控制启用或停用
const statusText = ref('确定要此操作吗？') // 启用或停用的内容
const statusHeader = ref('提示') // 启用或停用的内容
const dialogDeleteVisible = ref(false) // 控制删除弹层显示隐藏
const deleteText = ref('此操作将永久删除这条信息，是否继续？') // 删除的内容
const prodDisabledVisible = ref(false) // 生产环境禁用操作弹窗
const route = useRoute()
const url = ref('')

// 分页
const pagination = ref({
  defaultPageSize: 10,
  total: 0,
  defaultCurrent: 1 // 默认当前页
})
// 搜索框表单
const searchForm = {
  index: '',
  status: undefined,
  serviceCallNumber: undefined,
  updateTime: []
}
// 监听路由变化
watch(
  () => route.path,
  (newValue) => {
    url.value = newValue
    // fetchData(pagination.value)
  }
)
const formData = ref({ ...searchForm }) // 表单内容
// 生命周期
onMounted(() => {
  fetchData(pagination.value)
})
// 搜索功能
const handleSearch = (val) => {
  // 根据搜索框的内容进行搜索
  fetchData(val)
}
// 重置，清空搜索框
const handleReset = () => {
  // 清空搜索框的全部内容并且重新获取数据
  // 重置页码
  pagination.value.defaultCurrent = 1
  fetchData(pagination.value)
}
// 获取列表数据
const fetchData = async (val) => {
  dataLoading.value = true
  try {
    const params = {
      id: 'USER_APP_LIST',
      palyload: {
        ...val
      }
    }
    const res: any = await getApplicationList(params) // 获取列表数据,当前为mock接口，后续会替换为真实接口，并接受真实数据传值
    listData.value = res.data.result.data
    pagination.value.total = res.data.result.total
  } finally {
    dataLoading.value = false
  }
}
// 关闭弹窗
const handleClose = () => {
  visible.value = false // 关闭新增弹窗
  dialogDeleteVisible.value = false // 关闭删除弹层
  prodDisabledVisible.value = false
  dialogStatusVisible.value = false
}
// 点击新建
const handleBulid = () => {
  // // 显示新建弹窗
  visible.value = true
  // 将弹窗的标题改为新建
  title.value = '新建'
  DialogFormdata.value = { status: 1 }
}
// 点击编辑
const handleSetupContract = (val) => {
  // 深拷贝
  DialogFormdata.value = JSON.parse(JSON.stringify(val))
  console.log(DialogFormdata.value)
  // 显示新建弹窗
  visible.value = true
  // 将弹窗的标题改为新建
  title.value = '编辑'
}
const status = ref()
// 点击启用或停用
const handleClickStatus = (val, st) => {
  // 显示提示弹窗
  dialogStatusVisible.value = true
  statusText.value = `确定要${st === 0 ? '停用' : '启用'}吗？`
  status.value = { id: val.id, status: st }
}
const handleStatus = async () => {
  const params = {
    id: 'USER_APP_ADD_OR_UPDATE',
    palyload: {
      ...status.value
    }
  }
  const res: any = await saveApplication(params)
  if (res.success) {
    MessagePlugin.success('操作成功')
    dialogStatusVisible.value = false
    fetchData(pagination.value)
  } else {
    MessagePlugin.error(res.errorMessage)
  }
}
const deleteDataId = ref()
// 确认删除
const handleDelete = async () => {
  const params = {
    id: 'USER_APP_DELETE',
    palyload: {
      id: deleteDataId.value
    }
  }
  const res: any = await delApplication(params)
  dialogDeleteVisible.value = false
  if (res.success) {
    MessagePlugin.success('删除成功')
    fetchData(pagination.value)
  } else {
    MessagePlugin.error(res.errorMessage)
  }
}
// 点击删除
const handleClickDelete = (row) => {
  dialogDeleteVisible.value = true
  deleteDataId.value = row.id
}
</script>
